<template>
  <view class="mall-page">
    <!-- 积分信息头部 -->
    <view class="points-header">
      <view class="points-info">
        <text class="points-number">{{ userPoints }}</text>
        <text class="points-label">账户积分</text>
      </view>
      
      <view class="points-action" @tap="viewPointsDetail">
        <text class="action-text">积分明细</text>
        <text class="action-arrow">></text>
      </view>
    </view>

    <!-- 商品分类 -->
    <view class="category-tabs">
      <scroll-view class="tabs-scroll" scroll-x>
        <view class="tabs-container">
          <view 
            v-for="(category, index) in categories" 
            :key="index"
            class="tab-item"
            :class="{ 'tab-active': activeCategory === index }"
            @tap="switchCategory(index)"
          >
            {{ category.name }}
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 商品列表 -->
    <scroll-view 
      class="products-scroll" 
      scroll-y 
      @scrolltolower="loadMore"
      refresher-enabled
      @refresherrefresh="onRefresh"
      :refresher-triggered="refreshing"
    >
      <view class="products-grid">
        <view 
          v-for="(product, index) in productList" 
          :key="index"
          class="product-card fade-in"
          @tap="goToProductDetail(product)"
        >
          <view class="product-image">
            <image :src="product.image" mode="aspectFill" class="product-img"></image>
            <view v-if="product.tag" class="product-tag">{{ product.tag }}</view>
          </view>
          
          <view class="product-info">
            <view class="product-title">{{ product.title }}</view>
            <view class="product-price">
              <text class="points-price">{{ product.points }}积分</text>
              <text class="original-price">¥{{ product.originalPrice }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="load-more" v-if="loading">
        <view class="loading"></view>
        <text class="load-text">加载中...</text>
      </view>
      
      <view class="no-more" v-if="noMore">
        <text class="no-more-text">没有更多商品了</text>
      </view>
    </scroll-view>
  </view>
  <!-- 自定义底部导航栏 -->
  <custom-tab-bar ref="tabBar" />
</template>

<script setup>
import CustomTabBar from '@/custom-tab-bar/index.vue'
import { ref, onMounted } from 'vue'

const userPoints = ref(0)
const activeCategory = ref(0)
const refreshing = ref(false)
const loading = ref(false)
const noMore = ref(false)

const categories = ref([
  { name: '全部', type: 'all' },
  { name: '电子卡券', type: 'voucher' },
  { name: '超值好物', type: 'goods' },
  { name: '食品粮油', type: 'food' },
  { name: '家居日用', type: 'home' },
  { name: '仅可兑换', type: 'exchange' }
])

const productList = ref([
  {
    id: 1,
    title: '30元霸王茶姬代金券',
    points: 1000,
    originalPrice: '30',
    image: '/static/images/chagee-voucher.jpg',
    tag: '热门',
    category: 'voucher'
  },
  {
    id: 2,
    title: '50元京东E卡',
    points: 1500,
    originalPrice: '50',
    image: '/static/images/jd-card.jpg',
    tag: '推荐',
    category: 'voucher'
  },
  {
    id: 3,
    title: '35元瑞幸咖啡券',
    points: 1050,
    originalPrice: '35',
    image: '/static/images/luckin-voucher.jpg',
    category: 'voucher'
  },
  {
    id: 4,
    title: '50元沃尔玛购物卡',
    points: 1500,
    originalPrice: '50',
    image: '/static/images/walmart-card.jpg',
    category: 'goods'
  },
  {
    id: 5,
    title: '50元喜茶喜卡',
    points: 1500,
    originalPrice: '50',
    image: '/static/images/heytea-card.jpg',
    category: 'voucher'
  },
  {
    id: 6,
    title: '50元星巴克星享卡',
    points: 1500,
    originalPrice: '50',
    image: '/static/images/starbucks-card.jpg',
    tag: '限量',
    category: 'voucher'
  }
])

onMounted(() => {
  // 设置自定义tabbar选中状态
  if (typeof getApp().globalData.setTabBarIndex === 'function') {
    getApp().globalData.setTabBarIndex(3)
  }
  
  loadUserPoints()
})

const loadUserPoints = () => {
  // 模拟从服务器获取用户积分
  userPoints.value = 1000
}

const viewPointsDetail = () => {
  uni.navigateTo({
    url: '/pages/points-detail/points-detail'
  })
}

const switchCategory = (index) => {
  activeCategory.value = index
  // 根据分类筛选商品
  filterProductsByCategory(index)
}

const filterProductsByCategory = (categoryIndex) => {
  // 模拟根据分类筛选商品
  if (categoryIndex === 0) {
    // 显示全部商品
    return
  }
  
  const categoryType = categories.value[categoryIndex].type
  // 这里可以根据不同分类筛选商品
  console.log('筛选分类:', categoryType)
}

const onRefresh = () => {
  refreshing.value = true
  
  // 模拟刷新数据
  setTimeout(() => {
    refreshing.value = false
    uni.showToast({
      title: '刷新成功',
      icon: 'success'
    })
  }, 1500)
}

const loadMore = () => {
  if (loading.value || noMore.value) return
  
  loading.value = true
  
  // 模拟加载更多数据
  setTimeout(() => {
    loading.value = false
    noMore.value = true
  }, 1500)
}

const goToProductDetail = (product) => {
  uni.navigateTo({
    url: `/pages/product-detail/product-detail?id=${product.id}`
  })
}
</script>

<style lang="scss" scoped>
.mall-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 140rpx;
}

.points-header {
  background: linear-gradient(135deg, #8BC34A 0%, #7CB342 100%);
  padding: 40rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.points-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.points-number {
  font-size: 48rpx;
  font-weight: bold;
  line-height: 1;
}

.points-label {
  font-size: 24rpx;
  opacity: 0.9;
  margin-top: 8rpx;
}

.points-action {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50rpx;
  backdrop-filter: blur(10rpx);
}

.action-text {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.action-arrow {
  font-size: 20rpx;
  font-weight: bold;
}

.category-tabs {
  background: white;
  padding: 0 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.tabs-scroll {
  white-space: nowrap;
}

.tabs-container {
  display: flex;
  align-items: center;
  height: 88rpx;
}

.tab-item {
  flex-shrink: 0;
  padding: 20rpx 24rpx;
  font-size: 26rpx;
  color: #666;
  position: relative;
  transition: all 0.3s ease;
  margin-right: 16rpx;
}

.tab-active {
  color: #8BC34A;
  font-weight: 600;
}

.tab-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background: #8BC34A;
  border-radius: 3rpx;
}

.products-scroll {
  height: calc(100vh - 200rpx - 140rpx);
}

.products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rpx;
  padding: 24rpx 32rpx;
}

.product-card {
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.product-card:active {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}

.product-image {
  position: relative;
  height: 240rpx;
  overflow: hidden;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-tag {
  position: absolute;
  top: 12rpx;
  left: 12rpx;
  background: rgba(139, 195, 74, 0.9);
  color: white;
  font-size: 18rpx;
  padding: 6rpx 12rpx;
  border-radius: 20rpx;
  backdrop-filter: blur(10rpx);
}

.product-info {
  padding: 20rpx;
}

.product-title {
  font-size: 26rpx;
  color: #333;
  line-height: 1.4;
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.points-price {
  font-size: 28rpx;
  color: #8BC34A;
  font-weight: 600;
}

.original-price {
  font-size: 22rpx;
  color: #999;
  text-decoration: line-through;
}

.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.load-text {
  font-size: 24rpx;
  color: #999;
  margin-left: 16rpx;
}

.no-more {
  text-align: center;
  padding: 40rpx;
}

.no-more-text {
  font-size: 24rpx;
  color: #ccc;
}
</style>
